<template>
  <section>
    <div class="filter-container">
      <el-input v-model="showName" :readonly="false" :placeholde="placeholder" :clearable="true" @clear="doClear" @change="doChange">
        <el-button slot="append" icon="el-icon-search" @click="openDialog"></el-button>
      </el-input>
      <gridDialog ref="gridDialog" :multi="false" :url="url" :columns="columns" @select="selectData" :pagination="pagination" :queryEntity="queryEntity" :queryList="queryList">
      </gridDialog>
    </div>
    <div style="clear:both;"></div>
  </section>
</template>
<script>
//import gridDialog from '@/components/GridDialog'

export default {
  components: { gridDialog: () => import('@/components/GridDialog') },
  name: 'gridQuery',
  data () {
    return {
      showName: ''
    }
  },
  props: {
    url: {
      type: String,
      default: function () {
        return ''
      }
    },
    name: {
      type: String,
      default: function () {
        return 'name'
      }
    },
    value: {
      type: String,
      default: function () {
        return 'value'
      }
    },
    rowName: {
      type: String,
      default: function () {
        return 'rowName'
      }
    },
    rowValue: {
      type: String,
      default: function () {
        return 'rowValue'
      }
    },
    openChange: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    autoInput: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    pagination: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    columns: {
      type: Array,
      default: function () {
        return []
      }
    },
    queryList: {
      type: Array,
      default: function () {
        return []
      }
    },
    entity: {
      type: Object,
      default: function () {
        return {}
      }
    },
    queryEntity: {
      type: Object,
      default: function () {
        return {}
      }
    },
    placeholder: {
      type: String,
      default: function () {
        return ""
      }
    }
  },
  created () {
    this.showName = this.entity[this.name]
  },
  methods: {
    doChange (newValue) {
      if (this.openChange) {
        this.$emit('dataChange', this.openChange, this.queryEntity)
      }
      //支持输入
      if (this.autoInput) {
        this.entity[this.value] = newValue
      }
    },
    openDialog () {
      this.$refs['gridDialog'].show()
    },
    doClear () {
      this.showName = null
      this.entity[this.value] = null
    },
    selectData (row) {
      this.showName = row[this.rowName]
      this.entity[this.value] = row[this.rowValue]
      if (this.openChange) {
        this.$emit('dataChange', this.openChange, this.queryEntity)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-box {
  padding-top: 8px;
  padding-left: 8px;
  border: #ebeef5 1px solid;
  clear: both;
}
</style>
